<template>
  <div class="city-wrap">
    <div class="city-box">当前选择：{{town}}</div>

    <div class="city-items">
      <div class="city-item" v-for="(item,index) in cityList" :key="index" @click="selectTown(item.name)">
        <span class="title">{{item.name}}</span>
        <img src="../images/location.png" class="pic" v-if="item.activeId == 1"/>
      </div>
    </div>
  </div>
</template>

<script>
  import townList from "../data/town"

  export default {
    props: {
      town: {
        type: String,
        default: '东莞全城',
      },
    },
    data() {
      return {
        itemList: townList,
        cityList: [],
      }
    },
    mounted() {
      for (let i = 0; i < this.itemList.length; i++) {
        this.cityList = this.itemList[i].towns;
        this.cityList.forEach((value) => {
          if (value.name == this.town) {
            this.$set(value, "activeId", 1);
          } else {
            this.$set(value, "activeId", 0);
          }
        });
      }
    },
    methods: {
      selectTown(town) {
        this.cityList.forEach((value) => {
          if (value.name == town) {
            this.$set(value, "activeId", 1);
          } else {
            this.$set(value, "activeId", 0);
          }
        });
        setTimeout(() => {
          this.$emit("selectTown", town);
        }, 30);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assest/mixin";

  .city-wrap {
    .wh(100%, 100%);
    .city-box {
      display: flex;
      align-items: center;
      padding-left: 0.32rem;
      margin-bottom: 0.267rem;
      position: fixed;
      top: 0;
      z-index: 99;
      .wh(100%, 1.2rem);
      background: @talent-bg-color;
      .size-color(0.4rem, rgba(255, 125, 62, 1));
    }
    .city-items {
      position: absolute;
      .wh(100%, auto);
      top: 1.467rem;
      background: @talent-bg-color;
      .city-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .wh(96.8%, 1.2rem);
        border-bottom: @talent-border-bottom;
        margin-left: 0.32rem;
        .pic {
          margin-right: 0.267rem;
          .wh(0.48rem, 0.48rem)
        }
        .title {
          .size-color(0.4rem, rgba(51, 51, 51, 1));
        }
      }
    }
  }
</style>
